<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.分析Hello效果</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>学校名：{{school}}</h1>
			<h1>学校地址：{{address}}</h1>
			<h1>学校名(大写)：{{school.toUpperCase()}}</h1>
			<h1>学校名(大写取前2位)：{{school.toUpperCase().slice(0,2)}}</h1>
			<h1>测试1：school</h1>
			<h1>测试2：tel</h1>
			<h1>测试3 ：1+1</h1>
			<h1>测试4 ：{{1+1}}</h1>
			<h1>测试5 ：{{floor > 6 ? '高' : '低'}}</h1>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					school:'atguigu',
					address:'宏福科技园',
					floor:3
				}
			})
		</script>
	</body>
</html>